<template>
  <div :style="{width:'25%'}">
    <LiquidChart :="config"></LiquidChart>
  </div>
  <slot name="title">
    {{ title }}
  </slot>
</template>

<script>
import {LiquidChart} from '@opd/g2plot-vue'

export default {
  name: "liquidchart",
  props: {
    percent: {
      type: Number,
      default: 0.2
    },
    title: {
      type: String,
      default: ''
    },
  }, components: {
    LiquidChart,
  }, data() {
    return {
      config: {
        height: 150,
        percent: this.percent,
        outline: {
          border: 4,
          distance: 8,
        },
        wave: {
          length: 128,
        },
      }
    }
  }
}
</script>

<style scoped>

</style>